import { Component } from 'react';
import PageHeader from '../components/PageHeader';
import { getIssueById } from '../api/issue';
import { getUserById } from '../api/user';
import { useParams } from 'react-router-dom';
import { Avatar } from 'antd';
import dayjs from 'dayjs';
import PropTypes from 'prop-types';

class IssueDetail extends Component {
  state = {
    issueInfo: {},
    issueUser: {},
  };
  async componentDidMount() {
    // 获取路由参数 id
    const { id } = this.props;
    const res = await getIssueById(id);
    this.setState({ issueInfo: res.data });

    // 获取 userId 对应的用户
    const result = await getUserById(res.data.userId);
    this.setState({ issueUser: result.data });
  }
  formatDate = (date) => {
    return dayjs(date).format('YYYY-MM-DD HH:mm:ss');
  };
  render() {
    return (
      <>
        <div className="">
          <PageHeader title="问题详情"></PageHeader>
        </div>
        <section className="flex px-10">
          <div className="left w-3/4 px-3">
            <div>
              <h3 className="text-lg">{this.state.issueInfo?.issueTitle}</h3>
              <div className="flex gap-2 border-b border-gray-300 py-2 mb-6">
                <Avatar size="small" src={this.state.issueUser?.avatar} />
                <span className="text-yellow-600">{this.state.issueUser?.nickname}</span>
                <span>发布于：{this.formatDate(this.state.issueInfo?.issueDate)}</span>
              </div>
            </div>
            <div>
              <div dangerouslySetInnerHTML={{ __html: this.state.issueInfo.issueContent }}></div>
            </div>
          </div>
          <div className="right bg-gray-400 grow">right</div>
        </section>
      </>
    );
  }
}

IssueDetail.propTypes = {
  id: PropTypes.string,
};

function WrapperParams(props) {
  const { id } = useParams();
  const newProps = { ...props, id };
  return <IssueDetail {...newProps} />;
}

export default WrapperParams;
